<template>
  <div class="box">
    <div class="bg-box">
      <img src="../../../static/images/index.png">
      <img class="one one-big" src="../../../static/images/1.png">
      <img class="eight eight-big" src="../../../static/images/eight.png">
      <img class="qi" src="../../../static/images/qi.png">
      <img class="light light1" src="../../../static/images/pink.png">
      <img class="light light2" src="../../../static/images/yellow.png">
      <img class="light light3" src="../../../static/images/pink.png">
      <img class="light light4" src="../../../static/images/green.png">
      <img class="light light5" src="../../../static/images/yellow.png">
      <img class="light light6" src="../../../static/images/green.png">
      <img class="light light7" src="../../../static/images/yellow.png">
      <img class="light light8" src="../../../static/images/yellow.png">
      <img class="light light9" src="../../../static/images/pink.png">
      <img class="light light10" src="../../../static/images/yellow.png">
      <img class="light light11" src="../../../static/images/green.png">
    </div>

    <div class="box-content">
      <div><span class="btn" @click="navToPoints">签到有礼</span></div>
      <div class="text mgt-40">每日签到可获得积分，</div>
      <div class="text">累计积分到一定额度可兑换奖品哦！</div>

      <div class="mgt-80"><span class="btn" @click="navToLottery">抽奖有惊喜</span></div>
      <div class="text mgt-40">每月8/18/28日都可抽奖，</div>
      <div class="text">还有机会获得话费、拉杆箱等惊喜好礼哦！</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      colorLightImg: 'colorlight',
      openid: ''
    }
  },

  onShow () {
    // 如果用户信息或openid为空，跳转到登录页面
    if (!wx.getStorageSync('userInfo') || !wx.getStorageSync('openid')) {
      wx.navigateTo({
        url: '../login/main'
      })
    } else {
      this.openid = wx.getStorageSync('openid')
      this.getAddress()
    }
  },

  methods: {

    /**
     * 跳转到兑换积分页面points
     */
    navToPoints () {
      wx.navigateTo({
        url: '../points/main'
      })
    },

    /**
     * 跳转到抽奖专区页面lottery
     */
    navToLottery () {
      wx.navigateTo({
        url: '../lottery/main'
      })
    },

    /**
     * 查询地址列表
     */
    getAddress () {
      this.$http.get('/api/v1/address/info?openid=' + this.openid).then(res => {
        console.log('地址查询结果', res)
        if (res.data.code === '0') {
          if (res.data.data.addressList.length > 0) {
            wx.setStorageSync('haveAddress', true)
          } else {
            wx.setStorageSync('haveAddress', false)
          }
        } else {
          console.log('地址查询失败')
        }
      })
    }
  }
}
</script>

<style scoped>
.box {
  text-align: center;
  background: #d53a4a;
  /* box-shadow: 0 0 500rpx #8f1f27 inset; */
  padding-bottom: 50rpx;
}

.bg-box img {
  height: 716rpx;
  width: 750rpx;
  position: relative;
}

.bg-box .qi {
  width: 160rpx;
  height: 168rpx;
  position: absolute;
  top: 194rpx;
  left: 250rpx;
}

.qi-big {
  animation: qi-to-big 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes qi-to-big {
  0% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(1.1) rotate(7deg);
  }
}
.one {
  width: 156rpx !important;
  height: 304rpx !important;
  position: absolute !important;
  top: 90rpx;
  left: 135rpx;
}

.one-big {
  animation: one-to-big 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
@keyframes one-to-big {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

.eight {
  width: 249rpx !important;
  height: 305rpx !important;
  position: absolute !important;
  top: 371rpx;
  left: 412rpx;
}

.eight-big {
  animation: eight-to-big 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
@keyframes eight-to-big {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}
.light {
  width: 44rpx !important;
  height: 44rpx !important;
}
.light1 {
  position: absolute !important;
  top: 19rpx;
  left: 480rpx;
  animation: light-to-big 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
.light2 {
  position: absolute !important;
  top: 46rpx;
  left: 430rpx;
  animation: light-to-small 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.light3 {
  position: absolute !important;
  top: 64rpx;
  left: 368rpx;
  animation: light-to-big 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.light4 {
  position: absolute !important;
  top: 85rpx;
  left: 310rpx;
  animation: light-to-small 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.light5 {
  position: absolute !important;
  top: 126rpx;
  left: 332rpx;
  animation: light-to-big 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.light6 {
  position: absolute !important;
  top: 134rpx;
  left: 395rpx;
  animation: light-to-small 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.light7 {
  position: absolute !important;
  top: 162rpx;
  left: 460rpx;
  animation: light-to-big 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.light8 {
  position: absolute !important;
  top: 205rpx;
  left: 440rpx;
  animation: light-to-small 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.light9 {
  position: absolute !important;
  top: 254rpx;
  left: 406rpx;
  animation: light-to-big 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.light10 {
  position: absolute !important;
  top: 298rpx;
  left: 430rpx;
  animation: light-to-small 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.light11 {
  position: absolute !important;
  top: 346rpx;
  left: 443rpx;
  animation: light-to-big 0.6s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes light-to-big {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1.1);
  }
}
@keyframes light-to-small {
  0% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0);
  }
}
.box-content {
  background: #b51a27;
  margin: -100rpx 40rpx 0 40rpx;
  border-radius: 30rpx;
  padding: 160rpx 0 50rpx 0;
  box-shadow: 0 0 400rpx #660d10 inset;
}

.box-content .btn {
  padding: 20rpx 100rpx;
  font-size: 44rpx;
  color: #a5222a;
  background: linear-gradient(to bottom, #eee4a9, #f9edc7);
  font-weight: bold;
  border-radius: 100rpx;
}

.box-content .text {
  font-size: 28rpx;
  color: #ffcaad;
  margin: 10rpx 0;
}
.mgt-40 {
  margin-top: 40rpx !important;
}

.mgt-80 {
  margin-top: 80rpx !important;
}
</style>
<style>
page {
  background: #d53a4a;
}
</style>

